<template>
  <el-divider content-position="left">图层属性</el-divider>
  <template v-if="selectedOverlay.info != null">
    <el-form  size="mini">
      <!-- POLYGON -->
      <template v-if="selectedOverlay.type == POLYGON">
        <el-form-item label="名称">
          <el-input v-model="selectedOverlay.info.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="selectedOverlay.info.category">
            <el-option
              v-for="cate in polygonCategories"
              :key="cate.value"
              :label="cate.name"
              :value="cate.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="高度(米)" v-show="selectedOverlay.info.category === BUILDING">
          <el-input v-model="selectedOverlay.info.height"></el-input>
        </el-form-item>
      </template>
      <!-- POLYLINE -->
      <template v-else-if="selectedOverlay.type == POLYLINE">
        <el-form-item label="名称">
          <el-input v-model="selectedOverlay.info.name"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          道路
        </el-form-item>
        <el-form-item label="宽度(米)">
          <el-input v-model="selectedOverlay.info.width"></el-input>
        </el-form-item>
      </template>
      <template v-else-if="selectedOverlay.type == MARKER">
        <el-form-item label="经度">
          <el-input v-model="selectedOverlay.info.lng" readonly></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input v-model="selectedOverlay.info.lat" readonly></el-input>
        </el-form-item>
      </template>
      <!-- POLYGON -->
      <template v-else>
        <el-form-item label="背景">
          <div class="boundary-background" v-bind:style="`background-image:url(${selectedOverlay.info.background})`">
            <el-upload
              accept="image/*"
              class="background-upload"
              :on-change="handleBackgroundChange"
              :before-upload="() => false"
            >
              <el-button size="small" type="primary">选择图片</el-button>
            </el-upload>
          </div>
        </el-form-item>
      </template>
    </el-form>
  </template>
  <template v-else><div></div></template>
</template>

<script setup>
  import { onMounted, defineProps, ref } from "vue";
  import { editor, BUILDING, GRASS, ROAD, BOUNDARY, POLYGON, POLYLINE, WATER, MARKER } from "../core/Editor";
  
  const { selectedOverlay } = editor;

  const handleBackgroundChange = (file) => {
    const reader = new FileReader();
    reader.onload = function() {
      const url = this.result;
      selectedOverlay.info.background = url;
      editor.updateBoundaryBackground(url);
    };
    reader.readAsDataURL(file.raw);
  };

  const polygonCategories = [
    { name: "建筑", value: BUILDING },
    { name: "水系", value: WATER },
    { name: "草地", value: GRASS },
  ]
</script>

<style scoped>
.boundary-background{
  width: 100%;
  height: 160px;
  position: relative;
  border: 1px solid #ccc;
  box-sizing: border-box;
  background-size: contain;
}

.boundary-background .background-upload{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
</style>